<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="" th:href="@{/lib/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div th:insert="nav_header/nav"></div>

    <div th:insert="nav_header/header"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <h1 style="color: #06b6ef" align="center">首页</h1>
            <table class="layui-hide" id="articles" lay-filter="test" border="none"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>

        <div>
            <!--<table class="layui-table" id="books"></table>-->
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>
<script th:src="@{/lib/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','form','table','jquery','layer'], function(){
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;

        renderTable();
        //第一个实例
        function renderTable(){
            table.render({
                elem: '#articles'
                ,url: '/article/list' //数据接口
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,page: true //开启分页
                ,cols: [
                    [ //表头
                        // {type: 'checkbox', fixed: 'left'}
                        ,{field: 'id', title: '编号', width:400}
                        ,{field: 'content', title: '正文', width:400}
                        ,{field: 'created', title: '创建时间', width:400}
                        ,{field: 'summary', title: '概述', width:400}
                        ,{field: 'title', title: '标题', width:400}
                        ,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#barDemo'}
                        // 手机号码中间四位保护
                        // ,{field:'lock', title:'状态(启用/禁用)', width:150, templet: '#checkboxTpl', unresize: true}
                    ]
                ]
            });
        }
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                var id = data.id;

                window.location.href = '/article/detail?id='+id;

            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    var id = data.id;
                    location.href='/article/del?id='+id;
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                var id = data.id;
                window.location.href = '/article/update?id=' + id;
            }
        });
        // renderTable();
        // //第一个实例
        // function renderTable(){
        //     table.render({
        //         elem: '#books'
        //         ,url: '/book/getAll' //数据接口
        //         ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        //         ,page: true //开启分页
        //         ,cols: [
        //             [ //表头
        //                 // {type: 'checkbox', fixed: 'left'}
        //                 ,{field: 'id', title: '编号', width:180, sort: true, fixed: 'left'}
        //                 ,{field: 'content', title: '正文', width:180, sort: true, fixed: 'left'}
        //                 ,{field: 'created', title: '创建时间', width:180, sort: true, fixed: 'left'}
        //                 ,{field: 'summary', title: '概述', width:180, sort: true, fixed: 'left'}
        //                 ,{field: 'title', title: '标题', width:180, sort: true, fixed: 'left'}
        //                 // 手机号码中间四位保护
        //                 // ,{field:'lock', title:'状态(启用/禁用)', width:150, templet: '#checkboxTpl', unresize: true}
        //             ]
        //         ]
        //     });
        // }
})
</script>
<script >


</script>
</body>
</html>